import React from 'react'
import { Outlet, useNavigate, Link } from 'react-router-dom'

function RouterPassParamsFather() {
  const navigate = useNavigate()

  const navigateTo = (id) => {
    navigate(`/passParamsSon/${id}`)
  }

  return (
    <div>
      <h4>这是路由传参父页面</h4>
      <button onClick={() => navigateTo('001')}>跳转、传递id为001</button>
      <button onClick={() => navigateTo('002')}>跳转、传递id为002</button>
      <button onClick={() => navigateTo('003')}>跳转、传递id为003</button>
      <p>
        {/* 通过查询字符串的形式传参 */}
        <Link to="/passLocationSon?name=mafei&age=21">点击跳转第二种传参的页面</Link>
      </p>
      <Outlet />
    </div>
  )
}

export default RouterPassParamsFather
